@import "mixin";

$boldFontWeight: 600;
@mixin bold {
  font-weight: $boldFontWeight;

}

$greyBorderColor: #ebedf0;
$blueBorderColor: #004fbf;
$activeBlueTextColor: #004fbf;
$greyBackgroundColor: #f7f8fa;
$deviceStatusBarHeight: var(--status-bar-height);
$activeSelectGreyColor: whitesmoke;

// 设置z-index
@mixin zIndex5{
  z-index: 50;
}

@mixin bottomGreyBorder {
  border-bottom: 1px #ebedf0 solid;
}

// 手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height，
.device-status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.with-blue {
  background-color: #2667b9;
}

.white-back-button {
  @include contain-no-repeat-center;
  //background-color: black;
  width: 38rpx;
  height: 38rpx;
  position: relative;
  left: 30rpx;
  top: 30rpx;
  z-index: 1;
}

.active-effect {
  &:active {
    background-color: whitesmoke;
  }
}

.page-main {
  position: relative;
}

.my-text-area {
  width: 686rpx;
  min-height: 50rpx;
  border: solid 2rpx #c8c9cc;
  padding: 28rpx;
  box-sizing: border-box;

  &::placeholder {
    width: 364rpx;
    height: 48rpx;
    font-size: 28rpx;
    line-height: 48rpx;
    color: #969799;
  }
}

@mixin blue-transition-effect-background-image{
  background-image: linear-gradient(90deg, #2667b9 0%, #0b4daa 100%);
}

.blue-wide-button {
  color: white;
  font-size: 28rpx;
  @include center;
  box-sizing: border-box;
  width: 604rpx;
  height: 84rpx;
  background-color: #ebedf0;
  border-radius: 42rpx;
  background-image: linear-gradient(90deg, #2667b9 0%, #0b4daa 100%);
  box-shadow: 0rpx 8rpx 28rpx 6rpx rgba(16, 95, 196, 0.18);
  &:active{
    background: rgba(16, 95, 196, 0.69) none;
    border: 1rpx solid #0b4daa;
  }

  .text {
    width: 112rpx;
    height: 32rpx;
    font-size: 28rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 32rpx;
    letter-spacing: 0rpx;
  }
}

.custom-nav-bar {
  width: 100vw;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 32rpx;
  padding-right: 32rpx;
  box-sizing: border-box;

  .left-button {
    height: 40rpx;
    width: 40rpx;
    display: flex;
    justify-content: left;
    align-items: center;
    @include cover-no-repeat-center;
  }

}

$borderRadiusDegree: 2vw;

@mixin borderBottomRadius {
  border-bottom-right-radius: $borderRadiusDegree;
  border-bottom-left-radius: $borderRadiusDegree;
}

.loadMore{
  height: 100rpx;
  padding-bottom: 10px;
  /deep/ .uni-load-more__text{
    font-size: 12px;
    //color: $greyBorderColor!important;
  }
}

@mixin activeEffect{
  &:active {
    background-color: whitesmoke;
  }
}

.u-tabs-box{
  border-bottom: 1px solid whitesmoke;
}
